<template>
  <div>
    <el-dialog :title="title" :visible.sync="opens" width="1200px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-divider content-position="center">订单信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作号" prop="job_number">
              <el-select v-model="form.job_number" filterable placeholder="请选择工作号" clearable style="width: 100%" @change="jobNumberChange" disabled>
                <el-option
                  v-for="(dict,index) in numberAll"
                  :key="index"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托日期">
              <el-input v-model="order.entrust_date" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内部类型">
              <el-input v-model="order.inside_type_name" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="主单号">
              <el-input v-model="order.main_doc_no" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分单号">
              <el-input v-model="order.sub_order_No" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积">
              <el-input v-model="order.volume" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="center">账单录入</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="开票公司" prop="billing_company">
              <el-input v-model="form.billing_company" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算单位" prop="job_number">
              <el-select v-model="form.settlement_unit" placeholder="请选择结算单位" clearable style="width: 100%" disabled>
                <el-option
                  v-for="(dict,index) in unitAll"
                  :key="index"
                  :label="dict.account_name"
                  :value="dict.account_name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账单类型" prop="bill_type">
              <el-input v-model="form.bill_type" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="business_type">
              <el-input v-model="form.business_type" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="币种" prop="currency">
              <el-select v-model="form.currency" placeholder="请选择币种" clearable style="width: 100%" disabled>
                <el-option
                  v-for="(dict,index) in currencyAll"
                  :key="index"
                  :label="dict.currency_name"
                  :value="dict.currency_num"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账单号" prop="bill_num">
              <el-input v-model="form.bill_num" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="账单完成" prop="is_bill_ok">
              <el-select v-model="form.is_bill_ok" placeholder="账单完成" clearable style="width: 100%" disabled>
                <el-option label="完成" value="1" />
                <el-option label="未完成" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账单金额" prop="bill_money">
              <el-input v-model="form.bill_money" disabled/>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="工作号" prop="job_number">-->
          <!--              <el-input v-model="form.job_number" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="8">
            <el-form-item label="合并保留" prop="is_merge_reservation">
              <el-select v-model="form.is_merge_reservation" placeholder="确认状态" clearable style="width: 100%" disabled>
                <el-option label="保留合并" value="1" />
                <el-option label="不保留合并" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="通知开票" prop="is_notice_invoicing">
              <el-select v-model="form.is_notice_invoicing" placeholder="通知开票" clearable style="width: 100%" disabled>
                <el-option label="已通知" value="1" />
                <el-option label="未通知" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票完成" prop="is_billing_completed">
              <el-select v-model="form.is_billing_completed" placeholder="开票完成" clearable style="width: 100%" disabled>
                <el-option label="完成" value="1" />
                <el-option label="未完成" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票号" prop="invoice_num">
              <el-input v-model="form.invoice_num" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="账单标识" prop="bill_identification">
              <el-input v-model="form.bill_identification" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认状态" prop="confirm_status">
              <el-select v-model="form.confirm_status" placeholder="确认状态" clearable style="width: 100%" disabled>
                <el-option label="已确认" value="1" />
                <el-option label="未确认" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-row>-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="合并保留" prop="is_merge_reservation">-->
        <!--              <el-select v-model="form.is_merge_reservation" placeholder="确认状态" clearable style="width: 100%">-->
        <!--                <el-option label="保留合并" value="1" />-->
        <!--                <el-option label="不保留合并" value="2" />-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
<!--            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>-->
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { billAdd, billUpdate,getJobNumber, getExpensetype, getJobNumberInfo } from '@/api/settlement'
import { getProvider, getCurrency } from '@/api/basics'
export default {
  name: 'Detail',
  props: {
    opens: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      unitAll:[],
      // 工作号
      numberAll: [],
      // 费用代码
      expenseAll: [],
      //货币
      currencyAll: [],
      // 订单详情
      order: {},
      // 结算代码
      options: [],
      rules: {
        company_code: [
          { required: true, message: '请填写公司代码', trigger: 'blur' }
        ],
        name_c: [
          { required: true, message: '请填写中文名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getProvider()
    this.getJobNumber()
    this.getExpensetype()
    this.getCurrency()
  },
  watch: {
    'opens': function(newValue, oldValue) {
      if (newValue === true && this.title === '详情') {
        this.jobNumberChange(this.form.job_number)
      }
    }
  },
  methods: {
    getJobNumber() {
      getJobNumber().then(response => {
        if (response.code === 10000) {
          this.numberAll = response.data
        }
      })
    },
    getCurrency() {
      getCurrency().then(response => {
        if (response.code === 10000) {
          this.currencyAll = response.data
        }
      })
    },
    getExpensetype() {
      // 费用代码
      getExpensetype().then(response => {
        if (response.code === 10000) {
          this.expenseAll = response.data
        }
      })
    },
    getProvider() {
      getProvider({'role':'15'}).then(response => {
        if (response.code === 10000) {
          this.unitAll = response.data
        }
      })
    },
    submitForm(formName) {
      console.log(formName)
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      billAdd(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      billUpdate(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:opens', false)
    },
    jobNumberChange(value) {
      getJobNumberInfo({ job_number: value }).then(response => {
        if (response.code === 10000) {
          this.order = response.data
        }
      })
    },
    expenseCodeChange(value) {
      this.expenseAll.find(item => {
        if (value === item.code) {
          this.form.expense_name = item.name
        }
      })
    },
    expensesTypeChange(value) {
      this.form.settlement_code = undefined
      this.form.settlement_name = undefined
      getProvider({ role: value }).then(response => {
        if (response.code === 10000) {
          this.options = response.data
        }
      })
    },
    settlementCodeChange(value) {
      this.$forceUpdate()
      this.options.find(item => {
        if (value === item.account_code) {
          this.form.settlement_name = item.account_name
        }
      })
    }
  }
}
</script>

